<template>
  <div class="container">
    <div class="form">
      <el-form ref="form" label-width="120px" :model="addForm" :rules="rules">
        <el-form-item label="账号:" prop="username">
          <el-input v-model="addForm.username" style="width: 300px" />
        </el-form-item>
        <el-form-item label="员工姓名:" prop="name">
          <el-input v-model="addForm.name" style="width: 300px" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="addForm.phone" style="width: 300px" />
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio v-model="addForm.sex" label="0">男</el-radio>
          <el-radio v-model="addForm.sex" label="1">女</el-radio>
        </el-form-item>
        <el-form-item label="身份证号:" prop="idNumber">
          <el-input v-model="addForm.idNumber" style="width: 300px" />
        </el-form-item>
      </el-form>
      <div class="button">
        <el-row type="flex" justify="center">
          <el-button @click="$router.back()">取消</el-button>
          <el-button type="primary" @click="btnadd">保存</el-button>
          <el-button type="info">保存并继续添加</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { addEmployee, getEmployeeDetail, updateEmployee } from '@/api/employee'
export default {
  name: 'DetailIndex',
  data() {
    return {
      addForm: {
        id: '',
        name: '',
        username: '',
        sex: '0',
        phone: '',
        idNumber: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        sex: [{ required: true, message: '请', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ],
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          {
            min: 15,
            max: 18,
            message: '请输入正确的身份证号',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    }
  },
  created() {
    // 判断地址是否存在id
    if (this.id) this.getEmployeeDetail()
  },
  methods: {
    btnadd() {
      this.$refs.form.validate(async(isok) => {
        if (isok) {
          //  编辑模式
          if (this.id) {
            await updateEmployee(this.addForm)
            this.$message.success('修改成功')
          } else {
            await addEmployee(this.addForm)
            this.$message.success('添加成功')
          }

          this.$router.push('/employee')
        }
      })
    },
    async getEmployeeDetail() {
      const res = await getEmployeeDetail(this.$route.params.id)
      this.addForm = res.data
    }
  }
}
</script>

<style>
.form {
  padding: 30px 50px;
}
.button {
  padding-top: 20px;
}
</style>
